<template>
    <div class="content">
        <div class="tabs">
            <div
                class="tab"
                :class="{ active: tabIndex == 1 }"
                @click="tabClick(1)"
            >
                热门
            </div>
            <div
                class="tab"
                :class="{ active: tabIndex == 2 }"
                @click="tabClick(2)"
            >
                实时
            </div>
            <div class="fb-but" @click="fabuShow = true">发布</div>
        </div>

        <div v-if="dataList.length > 0" class="news">
            <commentItem
                v-for="(item, index) in dataList"
                :key="index"
                :dataItem="item"
                @changeLike="changeLike"
                @setFollow="setFollow"
            ></commentItem>
        </div>

        <div class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pagesize"
                :total="all_count"
                @current-change="changePage"
            >
            </el-pagination>
        </div>

        <el-dialog title="随心分享" :visible.sync="fabuShow" width="700px">
            <div class="fabu">
                <div class="textarea">
                    <el-input
                        v-model="fabuTextarea"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        resize="none"
                        :maxlength="300"
                    >
                    </el-input>
                    <el-popover
                        v-model="emojiShow"
                        placement="top-start"
                        width="522px"
                        trigger="click"
                    >
                        <div class="quick-info" style="padding: 0">
                            <div class="quick-title" style="margin: 12px">
                                表情包
                            </div>
                            <div
                                v-if="emojiShow"
                                class="quick-list"
                                style="
                                    max-height: 500px;
                                    max-width: 607px;
                                    overflow-y: auto;
                                    display: flex;
                                    flex-wrap: wrap;
                                "
                            >
                                <el-tooltip
                                    v-for="(item, index) in emojiList"
                                    :key="index"
                                    effect="light"
                                    :content="item.name"
                                    placement="top-end"
                                >
                                    <img
                                        class="quick-img"
                                        :src="item.url"
                                        :alt="item.name"
                                        @click="clickEmoji(item)"
                                    />
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="tool-item" slot="reference">
                            <img src="~/assets/images/csjh/emoji.png" alt="" />
                        </div>
                    </el-popover>
                </div>

                <el-upload
                    class="file-uploader"
                    :action="imgUploadUrl"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeUpload"
                    :on-success="onSuccess"
                    :on-remove="onRemove"
                    :on-exceed="onExceed"
                    :headers="headers"
                    :limit="4"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    type="warning"
                    style="width: 128px"
                    :disabled="!fabuTextarea && !userInfo"
                    @click="fabu"
                >
                    发布
                </el-button>
            </span>
        </el-dialog>

        <el-image
            class="my-img"
            v-show="false"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>
    </div>
</template>

<script>
import commentItem from "@/components/happlypost/commentItem.vue";
import { mapState } from "vuex";
import { addTopicSubmit, getTopicList } from "@/assets/api/happlypostApi.js";
import axios from "axios";
import { goTop, getEmoji } from "@/assets/utils/utils";

import emojiList from "@/assets/json/emojiList.json";

export default {
    components: {
        commentItem,
    },
    name: "pageindex",
    props: {},
    data() {
        return {
            commentInput: "",
            showInput: true,
            fabuShow: false,

            previewList: [],
            isUpload: false,
            images: [],
            imgUploadUrl: "",
            fabuTextarea: "",

            dataList: [],

            tabIndex: 1,

            page: 1,
            pagesize: 10,
            all_count: 0,

            fabuSwitch: false,

            emojiList: emojiList,
            emojiList2: {},
            emojiShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        //上传图片的请求头
        headers() {
            return {
                token: this.userInfo ? this.userInfo.token : "",
            };
        },
    },
    mounted() {
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        for (let item of emojiList) {
            this.emojiList2[item.emoji] = item.url;
        }
        this.getList();
    },
    methods: {
        // 发送表情包
        clickEmoji(item) {
            this.emojiShow = false;
            this.fabuTextarea += item.emoji;
        },

        tabClick(index) {
            this.tabIndex = index;
            this.page = 1;
            this.getList();
        },
        async getList() {
            this.dataList = [];
            const res = await getTopicList({
                sort: this.tabIndex,
                page: this.page,
                pagesize: this.pagesize,
            });
            if (res.code == 1) {
                this.$nextTick(() => {
                    for (let item of res.data) {
                        item.title = getEmoji(item.title, this.emojiList2);
                    }
                    this.dataList = res.data;
                });
                if (res.data.length > 0) this.all_count = res.data[0].all_count;
                else this.all_count = 0;
            }
        },

        // 点击分页
        changePage(e) {
            this.page = e;
            goTop(0);
            this.getList();
        },

        changeLike(dataItem) {
            for (let item of this.dataList) {
                if (item.id == dataItem.id) {
                    if (item.is_like == 1) {
                        item.is_like = 0;
                        item.give_like--;
                    } else {
                        item.is_like = 1;
                        item.give_like++;
                    }
                }
            }
        },

        setFollow(dataItem) {
            for (let item of this.dataList) {
                if (item.uid == dataItem.uid) {
                    if (item.is_follow == 1) {
                        item.is_follow = 0;
                    } else {
                        item.is_follow = 1;
                    }
                }
            }
        },

        async fabu() {
            // console.log(this.fabuTextarea);
            // console.log(this.images.join(","));
            if (this.fabuSwitch) return;
            this.fabuSwitch = true;
            if (!this.fabuTextarea && !this.userInfo) {
                return;
            }
            const res = await addTopicSubmit({
                title: this.fabuTextarea,
                pic: this.images.join(","),
            });
            if (res.code == 1) {
                this.getList();
                this.fabuTextarea = "";
                this.$alert("话题发布成功", "提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                        this.fabuShow = false;
                        this.fabuSwitch = false;
                    },
                });
            }
        },

        handlePictureCardPreview(file) {
            this.previewList = [file.url];
            this.$refs.myImg.showViewer = true;
        },

        beforeUpload() {
            this.isUpload = true;
        },

        onSuccess(response, file, fileList) {
            this.isUpload = false;
            this.getFileList(fileList);
        },
        onRemove(file, fileList) {
            this.getFileList(fileList);
        },

        onExceed(files, fileList) {
            // console.log(files, fileList);
            this.$message({
                message: "最多上传四张图片",
                type: "warning",
            });
        },

        // 处理组件返回数据
        getFileList(fileList) {
            console.log(fileList);
            this.images = [];
            for (let item of fileList) {
                this.images.push(item.response.data.fullurl);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding-top: 20px;
}
.tabs {
    width: 980px;
    height: 49px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #bbbbbb;
    display: flex;
    align-items: center;
    padding: 0 25px;
    position: relative;
    .active {
        color: #026beb !important;
    }
    .tab {
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        margin-right: 70px;
        cursor: pointer;
    }
}
.fb-but {
    width: 128px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #026beb;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    user-select: none;
    &:hover {
        opacity: 0.8;
    }
    &:active {
        opacity: 0.9;
    }
}

.news {
    padding: 26px 0;
}

.fabu {
    .textarea {
    }

    .tool-item {
        position: relative;
        top: 8px;
        text-align: right;

        img {
            width: 20px;
            height: 20px;
        }
    }

    &::v-deep .el-textarea__inner {
        border-color: #ff9625;
    }
}

.quick-info {
    padding: 12px;
    .quick-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        border-bottom: 1px solid #d8d8d8;
        text-align: center;
        padding: 10px 0 15px 0;
    }
    .quick-list {
        padding: 0 16px;
        padding-top: 18px;
        height: 300px;
        overflow-y: scroll;
        .quick-item {
            margin: 12px 0;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            &:hover {
                color: #1c87f3;
            }
        }

        .quick-img {
            width: 94px;
            height: 94px;
            object-fit: contain;
            margin: 12px 9px;
            cursor: pointer;
        }
    }
}

.page {
    padding-bottom: 23px;
    display: flex;
    justify-content: center;
}

::v-deep .el-button--warning span {
    color: #ffffff;
}

::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 84px;
}

::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 84px;
}

::v-deep .el-step__head.is-process {
    color: #ff892a;
    border-color: #ff892a;
}
</style>
